<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal draggable @close="closeDialog"
    :close-on-click-modal="false" :append-to-body="true">
    <el-form class="dialog-form" :model="paramFormData" ref="paramForm" label-position="right" label-width="150px"
      size="medium" @submit.native.prevent :rules="formRules" :disabled="formDisabled">
      <el-row>
        <el-col :span="12">
          <el-form-item label="参数标题" prop="paramTitle">
            <el-input v-model="paramFormData.paramTitle" placeholder="请输入参数标题" link show-word-limit clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数名称" prop="paramName">
            <el-input v-model="paramFormData.paramName" placeholder="请输入参数名称" link show-word-limit clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数数据类型" prop="paramDataType">
            <el-select v-model="paramFormData.paramDataType" placeholder="请选择参数数据类型" class="full-width-input" clearable>
              <el-option v-for="(item, index) in paramDataTypOptions" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接口参数名称" prop="iparamName">
            <el-input v-model="paramFormData.iparamName" placeholder="请输入接口参数名称" link show-word-limit clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接口参数类型" prop="iparamDataType">
            <el-select v-model="paramFormData.iparamDataType" placeholder="请选择接口参数类型" class="full-width-input"
              clearable>
              <el-option v-for="(item, index) in paramDataTypOptions" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认值" prop="defaultValue">
            <el-input v-model="paramFormData.defaultValue" placeholder="请输入默认值" link show-word-limit clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否必填" prop="notNullFlag">
            <el-select v-model="paramFormData.notNullFlag" placeholder="请选择是否必填" class="full-width-input" clearable>
              <el-option v-for="(item, index) in [{ label: '是', value: 1 }, { label: '否', value: 0 }]" :key="index"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拼接条件的方式" prop="criteria">
            <el-select v-model="paramFormData.criteria" placeholder="请选择拼接条件的方式" class="full-width-input" clearable>
              <el-option v-for="(item, index) in criteriaOptions" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="note">
            <el-input v-model="paramFormData.note" placeholder="请输入备注" type="textarea" :rows="2" show-word-limit
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryParamById } from '@/api/sys/interfaces'
export default {
  name: "interfaceParamsDialog",
  data() {
    return {
      type: '',
      paramType: 1,
      dialogTitle: '',
      dialogVisible: false,
      paramFormData: {},
      formDisabled: false,
      formRules: {
        paramTitle: [{ required: true, message: '请输入参数标题', trigger: 'blur' }],
        paramName: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
        paramDataType: [{ required: true, message: '请选择参数数据类型', trigger: 'change' }],
        iparamName: [{ required: true, message: '请输入接口参数名称', trigger: 'blur' }],
        iparamDataType: [{ required: true, message: '请选择接口参数类型', trigger: 'change' }],
        notNullFlag: [{ required: true, message: '请选择是否必填', trigger: 'change' }],
        criteria: [{ required: true, message: '请选择拼接条件的方式', trigger: 'change' }],
      },
      paramDataTypOptions: [
        {
          label: 'String',
          value: 'String'
        },
        {
          label: 'Integer',
          value: 'Integer'
        }
      ],
      criteriaOptions: [
        { value: 'eq', label: '等于' },
        { value: 'ne', label: '不等于' },
        { value: 'like', label: '包含' },
        { value: 'notlike', label: '不包含' },
        { value: 'rightlike', label: '以...开始' },
        { value: 'leftlike', label: '以...结尾' },
        { value: 'gt', label: '大于' },
        { value: 'ge', label: '大于等于' },
        { value: 'lt', label: '小于' },
        { value: 'le', label: '小于等于' },
      ],
    }
  },
  methods: {
    add(type, interfaceCode, version) {
      this.type = 'add'
      this.paramType = type
      this.dialogTitle = '新增参数'
      this.paramFormData = {
        paramId: new Date().getTime().toString() + Math.floor(Math.random() * 100).toString(),
        interfaceCode: interfaceCode,
        version: version,
        paramType: type,
        paramTitle: '',
        paramName: '',
        paramDataType: '',
        iparamName: '',
        iparamDataType: '',
        defaultValue: '',
        notNullFlag: '',
        criteria: '',
        note: '',
        disabledFlag: 0
      }
      this.dialogVisible = true
    },
    edit(row, paramType) {
      this.type = 'edit'
      this.paramType = paramType
      this.dialogTitle = '编辑参数'
      this.paramFormData = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      // queryParamById(row.paramId).then(res => {
      //   if (res.data.code === 200) {
      //     this.paramFormData = res.data.data
      //     this.dialogVisible = true
      //   } else {
      //     this.$message.error(res.data.message)
      //   }
      // }).catch(err => {
      //   this.$message.error(err)
      // })
    },
    submitForm() {
      this.$refs['paramForm'].validate((valid) => {
        if (valid) {
          if (this.type === 'edit') {
            this.$emit('edit', this.paramFormData, this.paramType)
            this.closeDialog()
          } else {
            this.$emit('add', this.paramFormData, this.paramType)
            this.closeDialog()
          }
        }
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs['paramForm'].clearValidate()
    },
  }
};
</script>

<style scoped></style>
